$(function () {
  const form = layui.form
  // 一、进入页面发送请求,获取数据
  // 1.1 封装函数,发送请求
  function loadList() {
    $.ajax({
      type: "get",
      url: "admin/links",
      success(res) {
        // console.log(res.data)
        // 1.1 模版引擎渲染
        const html = template("table-tpl", res)
        // console.log(html)
        $("tbody").html(html)
      },
    })
  }
  loadList()

  // 二、添加链接
  $("#add-link").on("click", () => {
    // 2.1 渲染弹出层
    const html = $("#add-form-tpl").html()
    const index = layer.open({
      type: 1,
      content: html,
      title: "添加链接",
      area: ["500px", "350px"],
    })

    // 2.2 给上传文件按钮注册点击事件,触发上传文件的点击事件
    $("#urlIcon").click(() => {
      $("#linkFile").click()
    })

    // 2.4 给表单注册change事件
    $("#linkFile").change(e => {
      // console.log(1)
      const objectURL = URL.createObjectURL(e.target.files[0])
      $("#preIcon").attr("src", objectURL)
    })

    // 2.3 给弹出层注册submit事件
    $("#add-form").on("submit", function (e) {
      // console.log(this)
      // 2.3.1 阻止默认行为
      e.preventDefault()
      // 2.3.2 获取表单的值
      const fd = new FormData(this)
      // 2.3.3 发送请求
      $.ajax({
        type: "post",
        url: "admin/links",
        data: fd,
        processData: false,
        contentType: false,
        success(res) {
          // console.log(res)
          if (res.status === 0) {
            layer.msg("添加链接成功", {
              icon: 1,
              time: 1000, //2秒关闭（如果不配置，默认是3秒）
            })

            loadList()
            layer.close(index)
          }
        },
      })
    })
  })

  // 三、编辑链接
  $("tbody").on("click", ".edit", function () {
    // 3.1 渲染弹出层的模版
    const html = $("#edit-form-tpl").html()
    const index = layer.open({
      type: 1,
      content: html,
      title: "编辑链接",
      area: ["500px", "350px"],
    })
    // 3.2 获取id
    const id = $(this).attr("data-id")
    // console.log(id)
    // 3.3 根据id请求友情链接的数据,赋值给弹出层
    $.ajax({
      type: "get",
      url: `admin/links/${id}`,
      success(res) {
        console.log(res)
        // 3.3.1 给弹出层赋值,更改图片的src
        form.val("editForm", res.data)
        $("#preIcon").prop("src", `http://localhost:8888/uploads/${res.data.linkicon}`)

        // 3.3.2 给上传文件按钮注册点击事件,触发上传文件的点击事件
        $("#urlIcon").click(() => {
          $("#linkFile").click()
        })

        // 3.3.3 给表单注册change事件
        $("#linkFile").change(e => {
          // console.log(1)
          const objectURL = URL.createObjectURL(e.target.files[0])
          $("#preIcon").attr("src", objectURL)
        })

        // 3.3.4 给弹出层注册submit事件
        $("#edit-form").on("submit", function (e) {
          // console.log(this)
          // (1) 阻止默认行为
          e.preventDefault()
          // (2) 获取表单的值
          const fd = new FormData(this)

          // (3) 发送请求
          $.ajax({
            type: "put",
            url: `admin/links/${id}`,
            data: fd,
            processData: false,
            contentType: false,
            success(res) {
              console.log(res)
              if (res.status === 0) {
                layer.msg("编辑链接成功", {
                  icon: 1,
                  time: 1000, //2秒关闭（如果不配置，默认是3秒）
                })

                loadList()
                layer.close(index)
              }
            },
          })
        })

        // 3.3.5 重置按钮注册点击事件,回归初始值
        $("#reset").click(() => {
          $.ajax({
            type: "get",
            url: `admin/links/${id}`,
            success(res) {
              form.val("editForm", res.data)
              $("#preIcon").prop(
                "src",
                `http://localhost:8888/uploads/${res.data.linkicon}`
              )
            },
          })
        })
      },
    })
  })

  // 四、删除友情链接
  $("tbody").on("click", ".delete", function () {
    // 4.1 获取该链接的id
    const id = $(this).attr("data-id")
    // console.log(id)
    // 4.2 根据id发送请求删除相应的链接
    layer.confirm("确实要删除吗？", function (index) {
      $.ajax({
        type: "delete",
        url: `admin/links/${id}`,
        success(res) {
          if (res.status === 0) {
            layer.msg("删除友情链接成功", {
              icon: 1,
              time: 1000, //2秒关闭（如果不配置，默认是3秒）
            })
            layer.close(index)
            loadList()
          }
        },
      })
    })
  })
})
